<template>
<div class="bigDiv">
  <div class="header">
    <h5>导入员工数据</h5>
  </div>
  <div class="content">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="上传文件">
        <el-upload
            class="upload-demo"
            action="http://132.232.110.185/personnelManagement/file/imgUploadFile"
            :on-success="handleSuccess"
            :file-list="fileList">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!--          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
          <div slot="tip" class="el-upload__tip">只能上传excel文件,，且不超过100mb</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">导入</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  name: "ImportStuffInfo",
  data(){
    return{
      //部门
      department:[{value:'选项1',label:'财务部'},{value:'选项2',label: '后勤部'},{value:'选项3',label:'人事部'}],
      dep:'',
      //文件
      fileList:[],
      form:{},
      file:{}
    }
  },
  methods:{
    //上传到服务器
    // submitUpload() {
    //   this.$refs.upload.submit();
    // },
    //移除文件
    handleSuccess(res,file){
      console.log(file)
      this.file=file
    },
    onSubmit(){
      console.log(this.file.raw)
      var fd=new FormData()
      fd.append('fileExcel',this.file.raw);
      console.log(fd)
      this.$axios.post('/employee/fileExcel',fd,{
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      }).then((res)=>{
        if(res.data.code==100){
          this.$message.success('上传成功！')
        }
      }).catch((err)=>{
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.header{
  width: 100%;
  height: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  outline:1px solid #cfd1d2;
}
.bigDiv{
  width: 800px;
}
</style>